<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  <title>录音Demo</title>
</head>
<body>
  <button id="recordBtn">开始录音</button>
  <button id="stopBtn" disabled>停止录音</button>
  <audio id="playback" controls></audio>

  <script>
    let mediaRecorder;
    let audioChunks = [];
    
    document.getElementById('recordBtn').addEventListener('click', async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        mediaRecorder = new MediaRecorder(stream);
        
        mediaRecorder.ondataavailable = (e) => {
          audioChunks.push(e.data);
        };
        
        mediaRecorder.onstop = () => {
          const audioBlob = new Blob(audioChunks);
          const audioUrl = URL.createObjectURL(audioBlob);
          document.getElementById('playback').src = audioUrl;
          audioChunks = [];
        };
        
        mediaRecorder.start();
        document.getElementById('recordBtn').disabled = true;
        document.getElementById('stopBtn').disabled = false;
      } catch (err) {
        alert('无法访问麦克风: ' + err.message);
      }
    });
    
    document.getElementById('stopBtn').addEventListener('click', () => {
      mediaRecorder.stop();
      mediaRecorder.stream.getTracks().forEach(track => track.stop());
      document.getElementById('recordBtn').disabled = false;
      document.getElementById('stopBtn').disabled = true;
    });
  </script>
</body>
</html>